跳到主要内容

Adding vector graphics to the web

  • Raster images bitmap(.bmp),PNG(.png),JPEG(.jpg),and GIF(.gif)
  • Vector images Scalable Vector Graphics (SVG) is an eXtensible Markup Language(XML) .

What is SVG​

SVG is an XML-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like <circle> and <rect>. More advanced SVG features include <feColorMatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.)

As a simple example, the following code creates a circle and a rectangle:

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

SVG有一些附加的好处

  • Text in vector images remains accessible (which also benefits your SEO).矢量图像中的文本仍然可以访问
  • SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.

Adding SVG to your pages​

用<img>嵌入。

<img
  src="equilateral.svg"
  alt="triangle with all three sides equal"
  height="87"
  width="100" />

Pros好处​

  • 快速，跟image语法一样，受益于alt属性。
  • 你可以把image放到一个hyperlink里通过嵌套<img> 到<a>element里。
  • svg文件能够被浏览器缓存，以后能快速加载。

Cons坏处​

  • 你不能用JavaScript处理
  • 如果你想要通过CSS操纵SVG内容，你必须包括inline CSS在你的CSS代码里。
  • You cannot restyle the image with CSS pseudoclasses (like :focus).

兼容性​

对于那些不支持SVG的浏览器(IE 8 and below, Android 2.3 and below)，你可以引用一个PNG或者JPG从你的src属性里，然后用srcset属性(which only recent browsers recognize)来引用SVG。这样的话，只有支持的浏览器会加载SVG老的浏览器会加载PNG图像来替代。

<img
  src="equilateral.png"
  alt="triangle with equal sides"
  srcset="equilateral.svg" />

You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:

CSSCopy to Clipboard

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

像上面<img>说的那样，插入SVGs使用CSS背景图片代表SVG不能被JavaScript处理，而且具有和CSS一样的限制。

Include SVG code inside your HTML​

叫做SVG inline,或者inlining SVG. <svg>

<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>

Pros​

  • 保存在HTTP请求里，因此可以稍微缩短加载时间。
  • assign classes and ids to SVG elements and styles with CSS,In fact, you can use any SVG presentation attribute as a CSS property.
  • Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)
  • 你可以将SVG标记成超链接，通过把他包在一个<a>element内。

Cons​

  • 只适用于在一个地方用，不可重复利用。
  • 增加HTML文件大小。
  • 浏览器无法通过缓存SVG图片来提高加载速度。
  • You may include fallback in a <foreignObject> element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.

在iframe元素中嵌入SVG​

<iframe src= "triangle.svg" width= "500" height= "500" sandbox>
  <img src= "triangle.png" alt= "Triangle with three unequal sides" />
</iframe>

This is definitely not the best method to choose:

Cons​

  • iframes 确实有fallback机制，就像你看到的但是浏览器只会在所有的iframes都不支持的时候才展示fallback。
  • 而且，除非SVG和你现在的网页是同一个地址，不然你不能用Javascript来操作SVG。